<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn">按钮</button>
    <ul>
      <li class="myli">1</li>
      <li class="myli">2</li>
      <li class="myli">3</li>
      <li class="myli">4</li>
    </ul>
    <script>
      // dom : document object model ：文档对象模型；
      // 1.获取dom 元素（element） 2.操作dom元素；
      // 获取元素
      // 一、通过id名来获取元素 只能获取一个元素；
      // var btnEle = document.getElementById("btn");
      // // 操作该元素
      // btnEle.onclick = function(){
      //     console.log(1111);
      // }

      // 获取元素的多种方式 ；
      // 二、通过类名来获取元素；获取到的是一个伪数组
      // var btnEle = document.getElementsByClassName("btn")[0];
      // console.log(btnEle);
      // var lis = document.getElementsByClassName("myli");
      // // console.log(lis);
      // // lis[0].onclick = function(){
      // //     alert(111);
      // // }

      // for(var i=0;i<lis.length;i++){
      //     lis[i].onclick = function(){
      //         alert(111);
      //     }
      // }
      // 三、通过标签名来获取元素；getElementsByTagName
      // var lis = document.getElementsByTagName("li");
      // console.log(lis);

      // 四、通过 css选择器来获取；只能获取一个元素，如果有多个元素，也只能获取第一个元素；
      // var btnEle = document.querySelector("ul .myli");
      // console.log(btnEle);

      // 五。可以通过css选择器获取多个元素；
      var btnEle = document.querySelectorAll(".btn");
      console.log(btnEle);

      // 1.获取一个元素的方法 2. 获取多个元素的方法 （放在伪数组里）;
    </script>
  </body>
</html>
